<template>
	<view>
		<view class="cardBg" v-if="item">
			<navigator v-if="!isMore"
				:url="'/pages/deviceDetails/deviceDetails?item='+ encodeURIComponent(JSON.stringify(item))">
				<view class="row">
					<view class="name">{{item.name}}</view>
					<view class="ststus">
						<view v-if="item.mqttStatus==='Online'&&item.bindStatus === 1" class="online">
						</view>
						<view v-if="item.mqttStatus==='Offline'&&item.bindStatus === 1" class="offline">
						</view>
						<view v-if="item.bindStatus === 0" class="inActive">
						</view>
						<view v-if="item.bindStatus === 1&&item.mqttStatus==='Online'">在线</view>
						<view v-if="item.bindStatus === 1&&item.mqttStatus==='Offline'">离线</view>
						<view v-if="item.bindStatus === 0">未绑定</view>
					</view>
				</view>
				<view class="list">设备类型： {{item.product}}</view>
				<view class="list">设备编码：{{item.deviceNumber||'--'}}</view>
				<view class="list">关联网关：{{item.linkstr||'--'}}</view>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		name: "theme-item",
		data() {
			return {
				img: 'https://mp-779f4133-ea71-4a67-b4af-8cecfd13e8e1.cdn.bspapp.com/field.jpg',
			};
		},
		props: {
			isMore: {
				type: Boolean,
				default: false
			},
			item: {
				type: Object,
				default: function() {
					return {};
				}
			}
		},
		methods: {
			goDetails(item) {
				uni.navigateTo({
					url: "/pages/deviceDetails/deviceDetails?query=" + encodeURIComponent(JSON.stringify(item))
				})
			}
		},
	}
</script>
<style lang="scss" scoped>
	.cardBg {
		.row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 5px 0;

			.name {
				font-size: 14px;
				font-weight: 600;
				color: #000;
			}

			.ststus {
				display: flex;
				align-items: center;
				width: 60px;
				.online {
					background: #67C23A;
					color: #fff;
					font-size: 22rpx;
					padding: 16rpx;
					border-radius: 50%;
				}

				.offline {
					background: #F56C6C;
					color: #fff;
					font-size: 22rpx;
					padding: 16rpx;
					border-radius: 50%;
				}

				.inActive {
					background: #919191;
					color: #fff;
					font-size: 22rpx;
					padding: 16rpx;
					border-radius: 50%;
				}

				view {
					font-size: 12px;
					color: #888;
					margin-left: 4px;
				}
			}

		}

		.list {
			font-size: 14px;
			color: #888;
			padding: 5px 0;
		}
	}
</style>